<template>
    <div :class="$style.dialogWrapper">
        <el-dialog width="90%" center :title='FormData.EdlitTitle' @close="cancle" :visible.sync="dialogFormVisible">
          <div :class="$style.title">
            <span>设备名称：{{FormData.deviceName}}</span>
            <span>设备编号：{{FormData.deviceSn}}</span>
          </div>
          <el-form :model="form">
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="报警规则名称" :label-width="formLabelWidth">
                  <el-input v-model="FormData.title"  placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-if="!FormData.nodeIds">
                <el-form-item label="设备模板" :label-width="formLabelWidth">
                  <el-select v-model="FormData.severity" placeholder="请选择">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="注意" value="2"></el-option>
                    <el-option label="警告" value="3"></el-option>
                    <el-option label="危险" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="单指标规则条件" :label-width="formLabelWidth"></el-form-item>
              </el-col>
              <el-col :span="24">
                <el-table size="mini" :header-cell-style="headerCellStyle" :cell-style="tableCellStyle" :data="tableData.data" border style="width: 100%" highlight-current-row>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column
                      label="测点名称"
                      width="120">
                      <template slot-scope="scope">
                        <span v-if="scope.row.isSet">
                            <el-input size="mini" placeholder="请输入内容" v-model="tableData.temp['time']">
                            </el-input>
                        </span>
                        <span v-else>{{scope.row.time}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="指标参数"
                      width="120">
                      <template slot-scope="scope">
                        <span v-if="scope.row.isSet">
                            <el-input size="mini" placeholder="请输入内容" v-model="tableData.temp['name']">
                            </el-input>
                        </span>
                        <span v-else>{{scope.row.name}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="数据类型"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="条件"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="阈值"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="持续(间隔)时间(秒)"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="次数"
                      show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="del(scope.row,scope.$index)">
                                删除
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24">
                <div :class="$style.addRow" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
              </el-col>
              <el-col :span="24">
                <el-form-item label="多指标规则条件" :label-width="formLabelWidth"></el-form-item>
              </el-col>
              <el-col :span="24">
                <el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column v-for="(v,i) in master_user.columns" v-bind:key="i" :prop="v.field" :label="v.title" :width="v.width">
                        <template slot-scope="scope">
                            <span v-if="scope.row.isSet">
                                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                                </el-input>
                            </span>
                            <span v-else>{{scope.row[v.field]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100">
                        <template slot-scope="scope">
                            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                                {{scope.row.isSet?'保存':"修改"}}
                            </span>
                            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
                                删除
                            </span>
                            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                                取消
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
              </el-col>
              <el-col :span="24">
                <div :class="$style.addRow" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报警消息" :label-width="formLabelWidth">
                  <el-input v-model="FormData.message"  placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="规则描述" :label-width="formLabelWidth">
                  <el-input v-model="FormData.desc"  placeholder="请输入内容"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报警级别" :label-width="formLabelWidth">
                  <el-select v-model="FormData.severity" placeholder="请选择报警级别">
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="注意" value="2"></el-option>
                    <el-option label="警告" value="3"></el-option>
                    <el-option label="危险" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="是否启用" :label-width="formLabelWidth">
                  <span>
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="0">否</el-radio>
                  </span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="cancle">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
</template>
<script>
// var generateId = {
//   _count: 1,
//   get () { return ((+new Date()) + '_' + (this._count++)); }
// };
export default{
  name: 'AlertRuleEdilt',
  props: {
    EdlitData: {
      type: Object
    },
    Visible: {
      type: Boolean
    }
  },
  data () {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      tableData: {
        temp: null, // 选中行
        data: [{
          id: 1,
          isSet: false,
          time: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          isSet: false,
          time: '2016-05-02',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 3,
          isSet: false,
          time: '2016-05-02',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      },
      master_user: {
        sel: null, // 选中行
        columns: [
          { field: 'type', title: '测点名称', width: 120, type: 'input' },
          { field: 'addport', title: '指标参数', width: 120, type: 'input' },
          { field: 'user', title: '数据类型', width: 120, type: 'input' },
          { field: 'pwd', title: '条件', width: 120, type: 'input' },
          { field: 'pwd', title: '阈值', width: 120, type: 'input' },
          { field: 'pwd', title: '次数', width: 120, type: 'input' },
          { field: 'info', title: '持续时间' }
        ],
        data: []
      },
      FormData: {},
      radio: '1'
    };
  },
  watch: {
    Visible: {
      immediate: true,
      handler (value) {
        this.dialogFormVisible = value;
      }
    },
    EdlitData: {
      immediate: true,
      handler (value) {
        console.log(value);
        this.FormData = value;
      }
    }
  },
  methods: {
    headerCellStyle () {
      return 'border: none;color: #9ac9ea';
    },
    tableCellStyle () {
      return 'border: none;color:#bbb';
    },
    cancle () {
      this.dialogFormVisible = false;
      this.$emit('hideVisible', false);
    },
    confirm () {
      this.dialogFormVisible = false;
      this.$emit('hideVisible', false);
    },
    del (row, index) {
      this.tableData.data.splice(index, 1);
    },
    // 添加一行
    addMasterUser () {
      for (let i of this.tableData.data) {
        if (i.isSet) return this.$message.warning('请先保存当前编辑项');
      }
      let j = { id: '', 'type': '', 'addport': '', 'user': '', 'pwd': '', 'info': '', 'isSet': true, '_temporary': true };
      this.tableData.data.push(j);
      this.tableData.temp = JSON.parse(JSON.stringify(j));
    },
    pwdChange (row, index, cg) {
      debugger;
      var vm = this;
      // 判断取消
      if (!cg) {
        if (!vm.tableData.temp.id) {
          vm.tableData.data.splice(index, 1);
        }
        row.isSet = !row.isSet;
        return row.isSet;
      }
      // 判断重复编辑
      for (let i of this.tableData.data) {
        if (i.isSet && i.id != row.id) {
          this.$message.warning('请先保存当前编辑项');
          return false;
        }
      }
      // 修改数据
      if (row.isSet) {
        (function () {
          row.isSet = false;
          vm.tableData.temp.isSet = false;
          let data = JSON.parse(JSON.stringify(vm.tableData.temp));
          for (let k in data) row[k] = data[k];
        })();
      } else {
        vm.tableData.temp = JSON.parse(JSON.stringify(row));
        row.isSet = true;
      }
    }
  }
};
</script>
<style lang="scss" module>
.title{
  text-align: center;
  margin-top: -24px;
  color: #72b3d7;
}

.addRow {
margin-top: 10px;
width: 100%;
height: 34px;
border: 1px dashed #c1c1cd;
border-radius: 3px;
cursor: pointer;
justify-content: center;
display: flex;
line-height: 34px;
}

</style>
